<template lang="pug">
  .interaction(v-if="isShow")
    .wrap(:class="{'is-mobile': hasMobile }")
      .close(@click="isShow = false")
        i.iconfont &#xe60b;
      .content
        h3 多屏互动

        el-radio-group.mt20(v-model='type')
          el-radio-button(label='创建房间')
          el-radio-button(label='加入房间')

        .box(v-if="hasCreateType")
          p 点击确定后，创建多屏互动房间后，自动生成一个房间钥匙，请在另外的设备上，输入该钥匙，加入房间互动
          .key(v-if="hasCreateType && getKey")
            strong(ref="roomKey") {{ getKey }}
            el-button.copy(type="text", @click="handleCopy") 复制
            p 当前房间人数：{{ getRoomNum }}


        .box(v-if="hasConnectType")
          p 输入房间钥匙，加入该房间进入多屏互动模式
          el-input.mt20(type="text", v-model="inputKey")
          p 当前房间人数：{{ getRoomNum }}

        .btn-group(v-if="hasCreateType")
          el-button(
            v-if="!hasConnect",
            type="success",
            size="medium",
            @click="handleCreate",
            @touchstart="handleCreate") 确定
          el-button(
            v-else,
            type="warning",
            isze="medium",
            @click="handleClose",
            @touchstart="handleClose") 关闭房间

        .btn-group(v-if="hasConnectType")
          el-button(v-if="!hasJoin",
          type="success",
          size="medium",
          @click="handleJoin",
          @touchstart="handleJoin") 确定
          el-button(v-else,
          type="warning",
          size="medium",
          @click="handleLeave",
          @touchstart="handleLeave") 离开房间

</template>

<script>
import { mapGetters } from "vuex";
import { isMobile } from "@/utils";

let ROOM_TYPE = "创建房间";
export default {
  data() {
    return {
      isShow: false,
      type: ROOM_TYPE,
      isConnect: false, // 是否主控制连接上了
      inputKey: "", // 房间钥匙
      isJoin: false, // 是否加入房间
      roomNum: 0
    };
  },
  mounted() {
    this.emitShow();
    this.emitRoomNub();
  },
  computed: {
    ...mapGetters(["isSocket", "socketRoom"]),

    getKey() {
      return this.socketRoom;
    },

    getRoomNum() {
      return this.roomNum;
    },

    hasConnect() {
      return this.isConnect;
    },

    hasJoin() {
      return this.isJoin;
    },

    hasCreateType() {
      return this.type === ROOM_TYPE;
    },

    hasConnectType() {
      return this.type !== ROOM_TYPE;
    },

    hasMobile() {
      return isMobile();
    }
  },
  methods: {
    // 点击右侧工具栏事件
    emitShow() {
      this.$vgo.on("socket:toggle", () => {
        this.isShow = true;
      });
    },

    // 监听房间人数变化
    emitRoomNub() {
      this.$vgo.on("broadcast:room-num", num => {
        this.roomNum = num;
      });
    },

    // 创建房间，同时修改地址，以此来确定是否是控制方
    handleCreate() {
      if (!this.isSocket) {
        this.$router.push({ path: this.$route.path + "?isocket=1" });
        this.isConnect = true;
        this.roomNum = 1;
        // 创建socket连接
        this.$vgo.emit("socket:create");
      }
    },

    // 加入socket房间
    handleJoin() {
      if (!this.inputKey) {
        this.$vgo.tip("请输入房间钥匙", "error");
        return;
      }
      this.isJoin = true;
      this.$vgo.emit("socket:join", this.inputKey);
      this.$vgo.tip("加入成功", "success");
      // 如果之前创建了房间，重置url
      this.$router.push("/panoview/" + this.$route.params.panoId);
      this.temporaryRepair();
      this.hide();
    },

    // 加入房间的用户离开房间
    handleLeave() {
      this.$vgo.emit("socket:close");
      this.isJoin = false;
      this.inputKey = "";
      this.roomNum--;
      this.hide();
    },

    // 主控制关闭连接
    handleClose() {
      this.$vgo.emit("socket:close");
      this.$router.push("/panoview/" + this.$route.params.panoId);
      this.restore();
      this.hide();
    },

    hide() {
      this.isShow = false;
    },

    // 充值数据，将地址栏查询参数去除
    restore() {
      this.roomNum = 0;
      this.isConnect = false;
      this.$store.commit("SET_SOCKET", false);
      this.$store.commit("SET_SOCKET_ROOM", "");
    },
    handleCopy() {
      const text = this.$refs.roomKey;

      if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
      } else {
        // alert("none")
      }
    },
    temporaryRepair() {
      let that = this;
      let windowFocusHeight = window.innerHeight;
      if (that.windowHeight == windowFocusHeight) {
        return;
      }

      let currentPosition;
      let speed = 1;
      currentPosition =
        document.documentElement.scrollTop || document.body.scrollTop;
      currentPosition -= speed;
      window.scrollTo(0, currentPosition); // 页面向上滚动
      currentPosition += speed;
      window.scrollTo(0, currentPosition); // 页面向下滚动
    }
  },
  watch: {
    socketRoom: {
      handler: function(val) {
        console.log(val);
      },
      immediate: true
    }
  }
};
</script>

<style lang="stylus" scoped>
.interaction
  position: fixed
  left: 0
  top: 0
  bottom: 0
  right: 0
  z-index: 1000
  background: rgba(0, 0, 0, .5)
  .wrap
    width: 500px
    height: 320px
    background: #ffffff
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)
    &.is-mobile
      width: 80%
      height: 360px
    .close
      position: absolute
      right: 10px
      top: 5px
      cursor: pointer
      i
        font-size: 24px
    .content
      padding: 20px
      color: #2e2e2e
      h3
        font-size: 20px
      p
        font-size: 14px
        line-height: 24px
      .box
        padding: 20px 10px
        min-height: 100px
      .key
        position: relative
        height: 40px
        border: 1px solid #999
        padding: 0 10px
        margin-top: 10px
        background: #dddddd
        .copy
          position: absolute
          right: 5px
          top: 0

        strong
          color: #3333
          font-size: 30px
      .btn-group
        padding-top: 15px
        text-align: center
</style>
